// 快捷键 rfc
import React, { useEffect, useRef, useState } from 'react'
import { Button, StyleSheet, Text, View, ScrollView, useWindowDimensions, useColorScheme } from 'react-native'

export default function FuncView(props: { show: boolean }) {

  // 接收父组件参数
  // 内置了 props.children  
  // 父组件直接传递 开闭标签间写入标签  比如<Text>{this is text}</Text>   子组件 {props.children} 就可以渲染 Text标签
  const { show } = props

  // 常用hook
  // 1. useState
  const [address, setAdress] = useState('this is address')
  
  // 2. useRef    默认为空
  const ScrollViewRef = useRef<any>(null)

  // 3. useEffect 副作用  只要第二个参数有一个值发生变化  useEffect都会重新执行
  useEffect(() => {
    console.log('触发useEffect')
    // 滚动到视图底部（水平方向的视图则滚动到最右边）。  官方文档https://www.reactnative.cn/docs/scrollview#scrolltoend
    setTimeout(() => {
      ScrollViewRef.current?.scrollToEnd({animated: true})
    }, 2000);
  }, [address])

  // 4. useWindowDimensions 获取屏幕尺寸
  const { width , height } = useWindowDimensions()
  console.log(width , height , 'width , height');

  // 5. useColorScheme 获取当前设备颜色主题
  const colorScheme = useColorScheme()
  console.log(`colorScheme=${colorScheme}`);
  
  
  
  const changeAdress = () => {
    setAdress('we are family')
  }

  return (
    <View style={{ width: '100%', paddingLeft: 20, height: 200, backgroundColor: '#3275c7' }}>
      <Text style={{ fontSize: 24, color: '#fff' }}>
        {show ? 'this is FuncView' : 'we are family'}
      </Text>
      <Text style={{ fontSize: 24, color: '#000' }}>
        {address}
      </Text>
      <View style={{ width: 200 }}>
        <Button
          onPress={changeAdress}
          title="changeAdress"
          color="#35b6f2"
        />
      </View>
      <ScrollView ref={ScrollViewRef}>
        <Text style={styles.text}>
          Aaa
        </Text>
        <Text style={styles.text}>
          Bbb
        </Text>
        <Text style={styles.text}>
          Ccc
        </Text>
        <Text style={styles.text}>
          Ddd
        </Text>
        <Text style={styles.text}>
          EEE
        </Text>
        <Text style={[styles.text , styles.textBlue]}>
          ffff
        </Text>
      </ScrollView>
    </View>

  )
}

const styles = StyleSheet.create({
  text: {
    fontSize: 24,
    color: '#f3f3f3',
    marginVertical: 12
  },
  textBlue: {
    color:'blue'
  }
});
